<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="../js/vue.js"></script>
  <script src="../js/rx.router.js"></script>
  <title>跳转&非菜单页配置</title>
</head>

<body>
  <a href="../">返回目录</a>
  <div>
    hash跳转（a标签）、js跳转（参数）
  </div>
  <div>
    非菜单（children）的页面配置others属性
  </div>
  <div id="app">
  </div>
</body>
<script>
  var menus = {
    pagename: 'app',
    component: getComponent('首页'),
    children: [{
        name: '页面1',
        pagename: 'page1',
        component: getComponent2('页面1')
      },
      {
        name: '页面2',
        pagename: 'page2',
        component: getComponent2('页面2'),
      },
      {
        name: '页面3',
        pagename: 'page3',
        component: getComponent2('页面3'),
        children: [{
            name: '页面3-子页面1',
            pagename: 'page3page1',
            component: {
              data() {
                return {
                  params: {}
                }
              },
              template: `<div>页面3-子页面1</div>`,
              created() {
                this.onRouterShow = (params) => {
                  this.params = params;
                  console.log('页面3-子页面1')
                }
              }
            }
          },
          {
            name: '页面3-子页面2',
            pagename: 'page3page2',
            component: {
              data() {
                return {
                  params: {}
                }
              },
              template: `<div>页面3-子页面2{{params}}</div>`,
              created() {
                this.onRouterShow = (params) => {
                  this.params = params;
                  console.log(params)
                }
              }
            },
          }
        ]
      }
    ],
    others: [{
      name: '神秘详情页',
      pagename: 'detailpage',
      component: {
        data() {
          return {
            params: {}
          }
        },
        template: `<div>详情页，参数{{params}}</div>`,
        created() {
          this.onRouterShow = (params) => {
            this.params = params;
            console.log(params)
          }
        }
      },
      path: '/detailpage/:id'
    }]
  }

  function getComponent(name) {
    return {
      template: `<div>
        <div>
          <strong>${name}</strong>
          <a href="#/page3/page3page2">点我跳转到-页面3-子页面2</a>
          <br>
          <button @click="goToDetail">点我跳到详情页</button>
          <br>
          <button @click="goToParams">点我跳转到-页面3-子页面2带额外的参数</button>
          <ul>
            <li v-for="item in $rxRouterInfo.menus" :key="item.pagename" :class="{
              active:$rxRouterInfo.current.pagename===item.pagename
            }"><a :href="'#'+item.path">{{item.name}}</a></li>
          </ul>
        </div>
        <component v-for="item in $rxRouterInfo.pages" :is="item.pagename" :key="item.pagename" v-show="$rxRouterInfo.current.pagename===item.pagename" />
      </div>`,
      methods: {
        goToDetail() {
          this.$rxRouter.goTo('detailpage',{
            id:'xxxx-xxxx-xxx-xxx-x-x-x-x'
          })
        },
        goToParams(){
          this.$rxRouter.goTo('page3page2',{
           a:'我是额外的参数'
          })
        }
      }
    }
  }
  function getComponent2(name) {
    return {
      template: `<div>
        <div>
          <strong>${name}</strong>
          <ul>
            <li v-for="item in $rxRouterInfo.menus" :key="item.pagename" :class="{
              active:$rxRouterInfo.current.pagename===item.pagename
            }"><a :href="'#'+item.path">{{item.name}}</a></li>
          </ul>
        </div>
        <component v-for="item in $rxRouterInfo.pages" :is="item.pagename" :key="item.pagename" v-show="$rxRouterInfo.current.pagename===item.pagename" />
      </div>`
    }
  }
  Vue.prototype.$rxRouter.init(menus)
  new Vue({
    el: '#app',
    template: '<app/>',
    components: {
      app: menus.component
    }
  })

</script>

</html>
